<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../jQuery库/jquery-1.10.1.js"></script>
<link rel="stylesheet" href="../css/jd.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>

<body>
    <div id='app'>
        <div class="box_top">
            <div class="logo">
                <div class="logo-img"></div>
            </div>
            <div class='serch'>
                <input type="text" class="serch-inp">
                <button class='search-but'>搜索</button>
            </div>
        </div>
        <div class='cent'>
            <div class="cent-box">
                <ul>
                    <li v-for="(item,index) in arr" :key="index">
                        <div class="gl-i-wrap">
                            <div :class="pimg">
                                <a href="">
                                    <img :src="item.img" alt="">
                                </a>
                            </div>
                            <div :class="pprice">
                                <div class='jiage'>￥600.00</div>
                            </div>
                            <div :class="pname">
                                {{item.title}}
                            </div>
                            <div :class="pcommit">
                                <span>{{item.pj}}</span>
                                条评论
                            </div>
                            <div :class="pshop">
                                <div>{{item.dp}}</div>
                            </div>
                            <div :class="pcommit">
                                <i class="goods-icons">自营</i>
                                <i class="goods-icons1">放心购</i>
                            </div>
                            <div :class="poperate">
                                <div class="p-o-btn">
                                    <i class=fangkuang></i>
                                    对比
                                </div>
                                <div class="p-o-btn">
                                    <i class="aixin" style="background-position:0 -413px;"></i>
                                    关注
                                </div>
                                <div class="p-o-btn1">
                                    <i class="gouwuche" style="background-position: 0 -272px;"></i>
                                    加入购物车
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                arr:'',
                pimg:'p-img',
                pprice:'p-price',
                pname:'p-name',
                pshop:'p-shop',
                pcommit:'p-commit',
                poperate:'p-operate'
            }
        })
        $.ajax({
            method:'get',
            url:'./data.json',
            success:function(data){
                vm.arr=data
            },
            error:function(err){
                console.log(err);
            }
        });
        $('.search-but').click(function(){
            $.ajax({
                method:'get',
                url:`./shujv.json`,
                success:function(data){
                   let datas = data.filter(function(el,index){
                        return el.title.indexOf($('.serch-inp').val())>-1
                    })
                    console.log(datas);
                    vm.arr=datas
                },
                error:function(err){
                    console.log(err);
                }
            })
        })
        
      
        
        

    </script>
</body>
</html>